<template>
  <div class="user-admin">
    <h1 style="font-size: 24px; font-weight: bold; margin-bottom: 20px;">User Management</h1>

    <button @click="openModal()" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px;">
      Add New User
    </button>

    <table style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr style="background-color: #f2f2f2;">
          <th style="padding: 12px; text-align: left; border-bottom: 1px solid #ddd;">ID</th>
          <th style="padding: 12px; text-align: left; border-bottom: 1px solid #ddd;">Username</th>
          <th style="padding: 12px; text-align: left; border-bottom: 1px solid #ddd;">Email</th>
          <th style="padding: 12px; text-align: left; border-bottom: 1px solid #ddd;">Created At</th>
          <th style="padding: 12px; text-align: left; border-bottom: 1px solid #ddd;">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id" style="border-bottom: 1px solid #ddd;">
          <td style="padding: 12px;">{{ user.id }}</td>
          <td style="padding: 12px;">{{ user.username }}</td>
          <td style="padding: 12px;">{{ user.email }}</td>
          <td style="padding: 12px;">{{ new Date(user.createdAt).toLocaleString() }}</td>
          <td style="padding: 12px;">
            <button @click="editUser(user)" style="background-color: #008CBA; color: white; padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px;">
              Edit
            </button>
            <button @click="deleteUser(user.id)" style="background-color: #f44336; color: white; padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer;">
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- Modal -->
    <div v-if="isModalOpen" style="position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
      <div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px;">
        <h2 style="margin-bottom: 20px;">{{ selectedUser ? 'Edit User' : 'Add New User' }}</h2>
        <form @submit.prevent="saveUser">
          <div style="margin-bottom: 15px;">
            <label for="username" style="display: block; margin-bottom: 5px;">Username</label>
            <input type="text" id="username" v-model="formData.username" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
          </div>
          <div style="margin-bottom: 15px;">
            <label for="email" style="display: block; margin-bottom: 5px;">Email</label>
            <input type="email" id="email" v-model="formData.email" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
          </div>
          <div style="margin-bottom: 15px;">
            <label for="password" style="display: block; margin-bottom: 5px;">Password</label>
            <input type="password" id="password" v-model="formData.password" :required="!selectedUser" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
          </div>
          <div style="text-align: right;">
            <button type="button" @click="closeModal" style="background-color: #f44336; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
              Cancel
            </button>
            <button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer;">
              Save
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, username: 'john_doe', email: 'john@example.com', createdAt: '2023-01-01T00:00:00Z' },
        { id: 2, username: 'jane_smith', email: 'jane@example.com', createdAt: '2023-01-02T00:00:00Z' },
        { id: 3, username: 'bob_johnson', email: 'bob@example.com', createdAt: '2023-01-03T00:00:00Z' },
      ],
      selectedUser: null,
      isModalOpen: false,
      formData: {
        username: '',
        email: '',
        password: '',
      },
    };
  },
  methods: {
    openModal() {
      this.selectedUser = null;
      this.formData = { username: '', email: '', password: '' };
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
      this.selectedUser = null;
      this.formData = { username: '', email: '', password: '' };
    },
    editUser(user) {
      this.selectedUser = user;
      this.formData = { ...user, password: '' };
      this.isModalOpen = true;
    },
    saveUser() {
      if (this.selectedUser) {
        // Edit existing user
        const index = this.users.findIndex(u => u.id === this.selectedUser.id);
        if (index !== -1) {
          this.users.splice(index, 1, { ...this.selectedUser, ...this.formData });
        }
      } else {
        // Add new user
        const newUser = {
          id: this.users.length + 1,
          ...this.formData,
          createdAt: new Date().toISOString(),
        };
        this.users.push(newUser);
      }
      this.closeModal();
    },
    deleteUser(userId) {
      if (confirm('Are you sure you want to delete this user?')) {
        this.users = this.users.filter(user => user.id !== userId);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--<style scoped>-->
<!--h1, h2 {-->
<!--  font-weight: normal;-->
<!--}-->
<!--ul {-->
<!--  list-style-type: none;-->
<!--  padding: 0;-->
<!--}-->
<!--li {-->
<!--  display: inline-block;-->
<!--  margin: 0 10px;-->
<!--}-->
<!--a {-->
<!--  color: #42b983;-->
<!--}-->
<!--</style>-->
<style scoped>
.user-admin {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.add-user-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.add-user-btn:hover {
  background-color: #45a049;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f5f5f5;
}

.edit-btn {
  background-color: #008CBA;
  color: white;
  padding: 5px 10px;
  margin-right: 5px;
}

.edit-btn:hover {
  background-color: #007a9e;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
}

.delete-btn:hover {
  background-color: #da190b;
}

.modal-overlay {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-content h2 {
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: #008CBA;
  box-shadow: 0 0 5px rgba(0, 140, 186, 0.5);
}

.modal-actions {
  text-align: right;
  margin-top: 20px;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
  padding: 10px 15px;
  margin-right: 10px;
}

.cancel-btn:hover {
  background-color: #da190b;
}

.save-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
}

.save-btn:hover {
  background-color: #45a049;
}

@media screen and (max-width: 600px) {
  .user-admin {
    padding: 10px;
  }

  table {
    font-size: 14px;
  }

  th, td {
    padding: 8px;
  }

  .edit-btn, .delete-btn {
    padding: 4px 8px;
    font-size: 12px;
  }

  .modal-content {
    width: 95%;
    padding: 15px;
  }
}
</style>
